<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/jquery.tmpl.js"></script>
    <script type="text/javascript" src="js/knockout-3.4.2.js"></script>
</head>
<body>
<div id="div_item_data">

</div>
<script id="item_data" type="text/x-jquery-tmpl">
     <div style="margin-bottom:10px;">
　　　　<span>${$data.ID}</span>
　　　　<span style="margin-left:10px;">${$item.getName(" ")}</span>
　　　</div>
</script>
<script type="text/javascript">
    var users = [{ID: 'think8848',Name: ['Joseph', 'Chan']},{ID:'aCloud', Name:['Mary','Cheung']}];
    $("#item_data").tmpl(users,{
            getName: function (spr) {
                return this.data.Name.join(spr);
            }
        }).appendTo('#div_item_data');
</script>
</body>
</html>